<template>
  <div class="case-detail">
    <div class="container mx-auto px-4 py-6">
      <!-- 页面头部 -->
      <div class="page-header mb-6">
        <div class="flex justify-between items-center">
          <div>
            <h1 class="page-title">交通事故鉴定案件详情</h1>
            <p class="text-gray-600">案件编号：{{ caseInfo.caseNumber }}</p>
          </div>
          <div class="flex gap-3">
            <el-button @click="goBack">
              <i class="fas fa-arrow-left mr-2"></i>返回
            </el-button>
            <el-button type="primary" @click="startIdentification">
              <i class="fas fa-play mr-2"></i>开始鉴定
            </el-button>
          </div>
        </div>
      </div>

      <!-- 案件基本信息 -->
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
        <div class="lg:col-span-2">
          <div class="info-card">
            <h2 class="card-title">
              <i class="fas fa-info-circle text-blue-600"></i>
              案件基本信息
            </h2>
            <div class="info-grid">
              <div class="info-item">
                <label>案件名称：</label>
                <span>{{ caseInfo.title }}</span>
              </div>
              <div class="info-item">
                <label>当事人：</label>
                <span>{{ caseInfo.clientName }}</span>
              </div>
              <div class="info-item">
                <label>案件类型：</label>
                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm bg-blue-100 text-blue-800">
                  {{ caseInfo.caseType }}
                </span>
              </div>
              <div class="info-item">
                <label>优先级：</label>
                <el-tag :type="getPriorityType(caseInfo.priority)">
                  {{ getPriorityText(caseInfo.priority) }}
                </el-tag>
              </div>
              <div class="info-item">
                <label>提交日期：</label>
                <span>{{ caseInfo.submittedDate }}</span>
              </div>
              <div class="info-item">
                <label>截止日期：</label>
                <span :class="{ 'text-red-600': isOverdue(caseInfo.deadline) }">
                  {{ caseInfo.deadline }}
                </span>
              </div>
            </div>
          </div>
        </div>

        <div>
          <div class="info-card">
            <h2 class="card-title">
              <i class="fas fa-chart-line text-green-600"></i>
              进度状态
            </h2>
            <div class="progress-info">
              <div class="progress-item">
                <div class="progress-label">案件状态</div>
                <div class="progress-value">
                  <span class="inline-flex items-center px-3 py-1 rounded-full text-sm bg-orange-100 text-orange-800">
                    待鉴定
                  </span>
                </div>
              </div>
              <div class="progress-item">
                <div class="progress-label">预计完成</div>
                <div class="progress-value">{{ caseInfo.estimatedDays }}天</div>
              </div>
              <div class="progress-item">
                <div class="progress-label">负责鉴定师</div>
                <div class="progress-value">待分配</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 交通事故详情 -->
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        <div class="info-card">
          <h2 class="card-title">
            <i class="fas fa-car-crash text-red-600"></i>
            事故基本情况
          </h2>
          <div class="accident-info">
            <div class="info-item">
              <label>事故时间：</label>
              <span>{{ accidentInfo.accidentTime }}</span>
            </div>
            <div class="info-item">
              <label>事故地点：</label>
              <span>{{ accidentInfo.accidentLocation }}</span>
            </div>
            <div class="info-item">
              <label>事故类型：</label>
              <span>{{ accidentInfo.accidentType }}</span>
            </div>
            <div class="info-item">
              <label>天气情况：</label>
              <span>{{ accidentInfo.weather }}</span>
            </div>
            <div class="info-item">
              <label>道路条件：</label>
              <span>{{ accidentInfo.roadCondition }}</span>
            </div>
            <div class="info-item">
              <label>责任认定：</label>
              <span class="font-semibold text-red-600">{{ accidentInfo.responsibility }}</span>
            </div>
          </div>
        </div>

        <div class="info-card">
          <h2 class="card-title">
            <i class="fas fa-user-injured text-purple-600"></i>
            伤情初步描述
          </h2>
          <div class="injury-info">
            <div class="info-item">
              <label>主要受伤部位：</label>
              <span>{{ injuryInfo.mainInjury }}</span>
            </div>
            <div class="info-item">
              <label>入院诊断：</label>
              <span>{{ injuryInfo.diagnosis }}</span>
            </div>
            <div class="info-item">
              <label>治疗情况：</label>
              <span>{{ injuryInfo.treatment }}</span>
            </div>
            <div class="info-item">
              <label>住院天数：</label>
              <span>{{ injuryInfo.hospitalizationDays }}天</span>
            </div>
            <div class="info-item">
              <label>预估伤残：</label>
              <span class="font-semibold text-blue-600">{{ injuryInfo.estimatedDisability }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 车辆信息 -->
      <div class="info-card mb-6">
        <h2 class="card-title">
          <i class="fas fa-car text-gray-600"></i>
          车辆信息
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div v-for="(vehicle, index) in vehicleInfo" :key="index" class="vehicle-card">
            <h3 class="vehicle-title">{{ vehicle.role }}</h3>
            <div class="vehicle-details">
              <div class="detail-row">
                <span class="detail-label">车牌号：</span>
                <span class="detail-value">{{ vehicle.plateNumber }}</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">车型：</span>
                <span class="detail-value">{{ vehicle.model }}</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">驾驶员：</span>
                <span class="detail-value">{{ vehicle.driver }}</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">保险情况：</span>
                <span class="detail-value">{{ vehicle.insurance }}</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">车损情况：</span>
                <span class="detail-value">{{ vehicle.damage }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 鉴定要求 -->
      <div class="info-card mb-6">
        <h2 class="card-title">
          <i class="fas fa-clipboard-list text-indigo-600"></i>
          鉴定要求
        </h2>
        <div class="appraisal-requirements">
          <div class="requirement-section">
            <h3 class="requirement-title">主要鉴定项目</h3>
            <ul class="requirement-list">
              <li v-for="item in appraisalRequirements.main" :key="item">
                <i class="fas fa-check-circle text-green-500 mr-2"></i>
                {{ item }}
              </li>
            </ul>
          </div>
          <div class="requirement-section">
            <h3 class="requirement-title">可选鉴定项目</h3>
            <ul class="requirement-list">
              <li v-for="item in appraisalRequirements.optional" :key="item">
                <i class="fas fa-circle text-gray-400 mr-2"></i>
                {{ item }}
              </li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 材料清单 -->
      <div class="info-card">
        <h2 class="card-title">
          <i class="fas fa-folder text-yellow-600"></i>
          材料清单
        </h2>
        <div class="material-list">
          <div v-for="material in materialList" :key="material.id" class="material-item">
            <div class="material-info">
              <i :class="material.uploaded ? 'fas fa-check-circle text-green-500' : 'fas fa-times-circle text-red-500'" class="mr-3"></i>
              <span class="material-name">{{ material.name }}</span>
            </div>
            <div class="material-status">
              <span v-if="material.uploaded" class="status-badge uploaded">已提交</span>
              <span v-else class="status-badge missing">缺失</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'

export default {
  name: 'AppraisalCaseDetail',
  setup() {
    const router = useRouter()
    
    const caseInfo = reactive({
      caseNumber: 'TA20240118001',
      title: '沪C88976机动车追尾交通事故人身损害赔偿案',
      clientName: '张某某',
      caseType: '交通事故',
      priority: 'high',
      submittedDate: '2024-01-18',
      deadline: '2024-02-18',
      estimatedDays: 15
    })
    
    const accidentInfo = reactive({
      accidentTime: '2024-01-15 14:30',
      accidentLocation: '上海市浦东新区世纪大道与张杨路交叉口',
      accidentType: '机动车追尾碰撞',
      weather: '晴天',
      roadCondition: '干燥、视线良好',
      responsibility: '后车承担全部责任'
    })
    
    const injuryInfo = reactive({
      mainInjury: '颈椎、腰椎、右腕关节',
      diagnosis: '颈椎挥鞭伤、腰椎压缩性骨折、右侧桡骨远端骨折',
      treatment: '颈托固定、腰椎手术内固定、右腕石膏固定',
      hospitalizationDays: 28,
      estimatedDisability: '九级或十级伤残'
    })
    
    const vehicleInfo = ref([
      {
        role: '肇事车辆（后车）',
        plateNumber: '沪C88976',
        model: '别克GL8商务车',
        driver: '李某某',
        insurance: '中国人保机动车保险（商业险100万）',
        damage: '前保险杠、大灯损坏，维修费用约8,000元'
      },
      {
        role: '受害车辆（前车）',
        plateNumber: '沪A56789',
        model: '丰田凯美瑞轿车',
        driver: '张某某（受害人）',
        insurance: '平安机动车保险（商业险50万）',
        damage: '后保险杠、后备箱盖严重变形，维修费用约15,000元'
      }
    ])
    
    const appraisalRequirements = reactive({
      main: [
        '人身伤残等级鉴定',
        '误工期、护理期、营养期鉴定（三期鉴定）',
        '伤残与交通事故因果关系鉴定'
      ],
      optional: [
        '护理依赖程度鉴定',
        '残疾辅助器具配置鉴定',
        '后续治疗费鉴定',
        '精神损害程度鉴定'
      ]
    })
    
    const materialList = ref([
      { id: 1, name: '身份证复印件', uploaded: true },
      { id: 2, name: '道路交通事故认定书', uploaded: true },
      { id: 3, name: '机动车驾驶证复印件', uploaded: true },
      { id: 4, name: '门急诊病历资料', uploaded: true },
      { id: 5, name: '住院病历资料', uploaded: true },
      { id: 6, name: 'X线、CT、MRI影像资料', uploaded: true },
      { id: 7, name: '诊断证明书', uploaded: false },
      { id: 8, name: '出院小结', uploaded: false },
      { id: 9, name: '医疗费发票及清单', uploaded: false },
      { id: 10, name: '车辆定损报告', uploaded: false },
      { id: 11, name: '现场照片及示意图', uploaded: false }
    ])
    
    const getPriorityType = (priority) => {
      const types = {
        'urgent': 'danger',
        'high': 'warning',
        'medium': 'primary',
        'low': 'info'
      }
      return types[priority] || 'info'
    }
    
    const getPriorityText = (priority) => {
      const texts = {
        'urgent': '紧急',
        'high': '高',
        'medium': '中',
        'low': '低'
      }
      return texts[priority] || '未知'
    }
    
    const isOverdue = (deadline) => {
      const today = new Date()
      const deadlineDate = new Date(deadline)
      return deadlineDate < today
    }
    
    const goBack = () => {
      router.go(-1)
    }
    
    const startIdentification = () => {
      router.push(`/appraisal/identification/${caseInfo.caseNumber}`)
    }
    
    return {
      caseInfo,
      accidentInfo,
      injuryInfo,
      vehicleInfo,
      appraisalRequirements,
      materialList,
      getPriorityType,
      getPriorityText,
      isOverdue,
      goBack,
      startIdentification
    }
  }
}
</script>

<style scoped>
.case-detail {
  background: #f8fafc;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

.page-title {
  font-size: 28px;
  font-weight: bold;
  color: #1f2937;
  margin: 0;
}

.info-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.info-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.card-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid #f3f4f6;
}

.info-item:last-child {
  border-bottom: none;
}

.info-item label {
  font-weight: 500;
  color: #6b7280;
  min-width: 80px;
  font-size: 14px;
}

.info-item span {
  color: #1f2937;
  font-size: 14px;
}

.progress-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.progress-item {
  display: flex;
  justify-content: between;
  align-items: center;
}

.progress-label {
  font-weight: 500;
  color: #6b7280;
  font-size: 14px;
  margin-bottom: 4px;
}

.progress-value {
  color: #1f2937;
  font-weight: 600;
  font-size: 14px;
}

.accident-info,
.injury-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vehicle-card {
  background: #f8fafc;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #e5e7eb;
}

.vehicle-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e7eb;
}

.vehicle-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.detail-label {
  font-weight: 500;
  color: #6b7280;
  font-size: 14px;
}

.detail-value {
  color: #1f2937;
  font-size: 14px;
  text-align: right;
  flex: 1;
  margin-left: 12px;
}

.appraisal-requirements {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.requirement-section {
  background: #f8fafc;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #e5e7eb;
}

.requirement-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 12px;
}

.requirement-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.requirement-list li {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #374151;
  padding: 8px 0;
}

.material-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.material-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  transition: all 0.2s ease;
}

.material-item:hover {
  background: #f0f9ff;
  border-color: #3b82f6;
}

.material-info {
  display: flex;
  align-items: center;
  flex: 1;
}

.material-name {
  font-size: 14px;
  color: #1f2937;
  font-weight: 500;
}

.material-status {
  margin-left: 12px;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.uploaded {
  background: #d1fae5;
  color: #065f46;
}

.status-badge.missing {
  background: #fee2e2;
  color: #991b1b;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .case-detail {
    padding: 16px;
  }
  
  .info-card {
    padding: 16px;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .detail-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .detail-value {
    text-align: left;
    margin-left: 0;
  }
  
  .appraisal-requirements {
    grid-template-columns: 1fr;
  }
}
</style> 